<template>
  <div>
    <div class="box-img"><img src="../../assets/images/us1.jpg" alt="" /></div>

    <div class="bj">
      <!-- 标题组件 -->
      <xtltie :xtitle="xtitle"></xtltie>
      <!-- 页面主体 -->
      <div class="main">
        <ul>
          <li>
            <div class="img">
              <img src="../../assets/images/wdsp6.jpg" alt="" />
            </div>
            <div class="news">
              <h3>燕台山助力乡村振兴</h3>
              <div class="news-text">
                视频介绍：钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高档性、稀缺性、增值性等特征，凸现珍贵的收藏价值。
              </div>
              <button>播放</button>
            </div>
          </li>
          <li>
            <div class="img">
              <img src="../../assets/images/wdsp6.jpg" alt="" />
            </div>
            <div class="news">
              <h3>燕台山助力乡村振兴</h3>
              <div class="news-text">
                视频介绍：钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高档性、稀缺性、增值性等特征，凸现珍贵的收藏价值。
              </div>
              <button>播放</button>
            </div>
          </li>
          <li>
            <div class="img">
              <img src="../../assets/images/wdsp6.jpg" alt="" />
            </div>
            <div class="news">
              <h3>燕台山助力乡村振兴</h3>
              <div class="news-text">
                视频介绍：钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高档性、稀缺性、增值性等特征，凸现珍贵的收藏价值。
              </div>
              <button>播放</button>
            </div>
          </li>
          <li>
            <div class="img">
              <img src="../../assets/images/wdsp6.jpg" alt="" />
            </div>
            <div class="news">
              <h3>燕台山助力乡村振兴</h3>
              <div class="news-text">
                视频介绍：钓鱼台馆藏封坛酒储存在特质的陶制酒坛中，有利于酒体的陈酿和老熟，随着储存年限的增长，酒味愈加醇和浓郁。每坛封坛酒均刻有唯一编号，并附有收藏证书，具有高档性、稀缺性、增值性等特征，凸现珍贵的收藏价值。
              </div>
              <button>播放</button>
            </div>
          </li>
        </ul>
        <!-- 底部导航 -->
        <bottom-nav></bottom-nav>
      </div>
    </div>
  </div>
</template>

<script>
import bottomNav from "../../components/bottomNav.vue";
//导入标题组件
import Xtltie from "../../components/Xtltie.vue";
export default {
  name: "Microvision",
  //注册组件
  components: {
    Xtltie,
    bottomNav,
  },
  data() {
    return {
      xtitle: {
        name: "微短视频",
        nameEnglish: "Micro video",
      },
    };
  },
};
</script>

<style lang="less" scoped>
@media screen and (min-width: 1029px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  // 总体样式
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .main {
      width: 80%;
      margin: auto;
      margin-top: 125px;
      ul {
        li {
          display: flex;
          margin-bottom: 74px;
          div {
            img {
              width: 100%;
            }
          }
          .news {
            width: 56%;
            margin-left: 35px;
            text-align: left;
            color: #000000;
            font-size: 18px;
            h3 {
              font-size: 30px;
              font-weight: bold;
              color: #ca0000;
              margin-bottom: 20px;
            }
            .news-text {
              text-indent: 32.4px;
              line-height: 37px;
              letter-spacing: 4px;
              display: -webkit-box; //对象作为弹性伸缩盒子模型显示
              overflow: hidden; //溢出隐藏
              -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
              -webkit-line-clamp: 3; //设置 块元素包含的文本行数
            }
            button {
              width: 120px;
              height: 40px;
              color: #ffffff;
              margin-top: 36px;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .box-img {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  // 总体样式
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .main {
      width: 98%;
      margin: auto;
      margin-top: 25px;
      // padding-bottom: 10%;
      ul {
        width: 100%;
        // display: flex;
        // flex-wrap: wrap;
        li {
          display: flex;
          width: 100%;
          margin-bottom: 74px;
          text-align: left;
          .img {
            width: 45%;
            margin: auto;
            img {
              width: 100%;
            }
          }
          .news {
            width: 53%;
            color: #000000;
            font-size: 16px;
            h3 {
              font-size: 20px;
              font-weight: bold;
              color: #ca0000;
              margin-bottom: 20px;
            }
            .news-text {
              text-indent: 32.4px;
              line-height: 24px;
              letter-spacing: 5px;
              display: -webkit-box; //对象作为弹性伸缩盒子模型显示
              overflow: hidden; //溢出隐藏
              -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
              -webkit-line-clamp: 3; //设置 块元素包含的文本行数
            }
            button {
              width: 20%;
              height: 40px;
              color: #ffffff;
              margin-top: 36px;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .box-img {
    position: relative;
    margin-bottom: 10px;
    img {
      width: 100%;
    }
  }
  // 总体样式
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 6%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;
    .main {
      width: 98%;
      margin: auto;
      margin-top: 15px;
      padding-bottom: 10%;
      ul {
        width: 98%;
        // display: flex;
        // flex-wrap: wrap;
        li {
          width: 100%;
          margin-bottom: 20px;
          display: flex;
          .img {
            width: 45%;
            // margin: auto;
            img {
              width: 100%;
            }
          }
          .news {
            width: 53%;
            margin-left: 10px;
            color: #000000;
            font-size: 14px;
            text-align: left;
            h3 {
              font-size: 12px;
              font-weight: bold;
              color: #ca0000;
              margin-bottom: 10px;
            }
            .news-text {
              // text-indent: 32.4px;
              letter-spacing: 4px;
              display: -webkit-box; //对象作为弹性伸缩盒子模型显示
              overflow: hidden; //溢出隐藏
              -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
              -webkit-line-clamp: 2; //设置 块元素包含的文本行数
            }
            button {
              width: 20%;
              // height: 40px;
              color: #ffffff;
              margin-top: 10px;
              background-color: #ca0000;
            }
          }
        }
      }
    }
  }
}
</style>